<!DOCTYPE html>

<html data-dojo-textdir="rtl">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>DOH complex inheritance test</title>

		<style type="text/css">
			@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/themes/claro/claro.css";
		</style>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, has: { 'dojo-bidi': true }">
		</script>

		<script type="text/javascript">
			dojo.require("dijit.layout.AccordionContainer");
			dojo.require("dijit.layout.ContentPane");
			dojo.require("dijit.layout.BorderContainer");
			dojo.require("dijit.layout.TabContainer");
			dojo.require("dojo.parser");	// scan page for widgets and instantiate them
			dojo.require("dijit.form.FilteringSelect");
			dojo.require("dijit.form.SimpleTextarea");
			dojo.require("dijit.form.Textarea");
			dojo.require("dijit.form.TextBox");
			dojo.require("doh.runner");

			dojo.ready(function(){

				doh.register("parse", function(){
					dojo.parser.parse();
				});

				doh.register("before MarkupAccordion textBox", [
					{
						name: "text direction of 'beforeMarkupAccordion'",

						setUp: function(){
							textBox = dijit.byId("beforeMarkupAccordion");
						},

						runTest: function(){
							doh.is("rtl",textBox.focusNode.dir,"direction of :" + textBox.id);
							textBox.set('value','\u05e9\u05d9\u05de\u05d5\u05e9\u0020\u05d1\u05ea\u05d2\u05d9\u05d5\u05ea\u002e');
							doh.is("rtl",textBox.focusNode.dir,"direction of :" + textBox.id);
						}
					}
				]);

				doh.register("test 'A Simple Pane'.", [
					{
						name:"check combo textDir.",

						runTest:function(){
							combo = dijit.byId("selectInPane");
							doh.is("rtl", combo.textDir, combo.id);
						}
					},
					{
						name: "check input field text direction",

						runTest: function(){
							var textBox = dijit.byId("simpleTextbox");

							doh.is("rtl", textBox.textDir,textBox.id);
						}
					}
				]);

				doh.register("test 'BorderContainer Pane'", [
					{
						name: "textDir of the panes",

						runTest: function(){
							var bContainer = dijit.byId("borderContainerPane"),
								cPane1 = dijit.byId("contentPane1"),
								cPane2 = dijit.byId("contentPane2");

							doh.is("auto",bContainer.textDir,"'borderContainerPane' textDir");
							doh.is("ltr",cPane1.textDir,"'contentPane1' textDir");
							doh.is("auto",cPane2.textDir,"'contentPane2' textDir");

						}
					},
					{
						name: "textDir of textBoxes in the 'contentPane1' textDir='ltr'",

						runTest: function(){
							var select = dijit.byId("selectL"),
								input1 = dijit.byId("inputLHeb"),
								input2 = dijit.byId("inputLEn");

							doh.is("ltr",select.textDir,"'selectL' textDir");
							doh.is("ltr",input1.textDir,"'inputLHeb' textDir");
							doh.is("ltr",input2.textDir,"'inputLEn' textDir");
						}
					},
					{
						name: "textDir of textBoxes in the 'contentPane2' textDir='auto'",

						runTest: function(){
							var selectA = dijit.byId("selectA"),
								input1 = dijit.byId("inputAHeb"),
								input2 = dijit.byId("inputAEn");

							doh.is("auto",selectA.textDir,"'selectA' textDir");
							doh.is("auto",input1.textDir,"'inputAHeb' textDir");
							doh.is("auto",input2.textDir,"'inputAEn' textDir");

							doh.is("",selectA.dir,"'selectA' dir");
							doh.is("rtl",input1.focusNode.dir,"'inputAHeb' textDir");
							doh.is("ltr",input2.focusNode.dir,"'inputAEn' textDir");
						}
					}
				]);

				doh.register("test 'Tags & panes with TextBoxesAreas'", [
					{
						name: "textDir of the panes",

						runTest: function(){
							doh.is("auto",dijit.byId("embeddedLayoutPane").textDir,"'embeddedLayoutPane' textDir");
							doh.is("ltr",dijit.byId("bContainer").textDir,"'bContainer' textDir");
							doh.is("ltr",dijit.byId("contentPane3").textDir,"'contentPane3' textDir");
							doh.is("auto",dijit.byId("contentPane4").textDir,"'contentPane4' textDir");
							doh.is("auto",dijit.byId("tContainer").textDir,"'tContainer' textDir");
							doh.is("rtl",dijit.byId("contentPane5").textDir,"'contentPane5' textDir");
							doh.is("auto",dijit.byId("contentPane6").textDir,"'contentPane6' textDir");
						}
					},
					{
						name: "textDir of textBoxes",

						runTest: function(){
							doh.is("ltr",dijit.byId("ltrSimpleTexarea").textDir,"'ltrSimpleTexarea' textDir");
							doh.is("ltr",dijit.byId("ltrSimpleTexarea").focusNode.dir,"'ltrSimpleTexarea' dir");

							doh.is("auto",dijit.byId("autoSimpleTexarea").textDir,"'autoSimpleTexarea' textDir");
							doh.is("rtl",dijit.byId("autoSimpleTexarea").focusNode.dir,"'autoSimpleTexarea' dir");

							doh.is("rtl",dijit.byId("rtlSimpleTexarea").textDir,"'rtlSimpleTexarea' textDir");
							doh.is("rtl",dijit.byId("rtlSimpleTexarea").focusNode.dir,"'rtlSimpleTexarea' dir");



							doh.is("auto",dijit.byId("texarea1").textDir,"'texarea1' textDir");
							doh.is("rtl",dijit.byId("texarea1").focusNode.dir,"'texarea1' dir");

							doh.is("auto",dijit.byId("texarea2").textDir,"'texarea2' textDir");
							doh.is("ltr",dijit.byId("texarea2").focusNode.dir,"'texarea2' dir");
						}
					}
				]);

				doh.run();
			});
		</script>

	</head>
	<body class="claro" data-dojo-textdir="rtl">

		<h1 class="testTitle">AccordionContainer Tests textDir="rtl" - defined in body tag.</h1>
		<h2>Accordion from markup:</h2>
							<input id="beforeMarkupAccordion" data-dojo-type="dijit/form/TextBox" data-dojo-props='name:"ltrMSimpleTexarea",
							value:"Markup Testing.", rows:"1", cols:"20"'/>

		<div id="markupAccordion" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props='style:"width:500px; height:600px; overflow:hidden"' >
			<div id="pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:"true",	title:"A Simple Pane"'>
				<select id= "selectInPane" data-dojo-type="dijit/form/FilteringSelect">
					<option value="1">foo.</option>
					<option value="2">&#1489;&#1512;.</option>
					<option value="3">baz.</option>
				</select>
				<p>
					<input id="simpleTextbox" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"&#1513;&#1500;&#1493;&#1501;!"'/>
				</p>
			</div>

			<div data-dojo-textdir="auto">
				<div id="borderContainerPane" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='title:"BorderContainer Pane"'>
					<div id="contentPane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width:50%", splitter:"true", textDir:"ltr"'>
						<p>
							This Pane ovverrides the body defined textDir="rtl" to textDir="ltr".
							See some examples:
						</p>
						<select id="selectL" data-dojo-type="dijit/form/FilteringSelect">
							<option value="1">foo.</option>
							<option value="2">&#1489;&#1512;.</option>
							<option value="3">baz.</option>
						</select>
						<p>
							<input id="inputLHeb" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"&#1513;&#1500;&#1493;&#1501;!"'/>
						</p>
						<p>
							<input id="inputLEn" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"Hello!"'/>
						</p>
					</div>
					<div id="contentPane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
						<p>
							This Pane inherits its textDir from the dijit.layout.BorderContainer, and now textDir="auto".
							See some examples:
						</p>
						<select id="selectA" data-dojo-type="dijit/form/FilteringSelect">
							<option value="1">foo.</option>
							<option value="2">&#1489;&#1512;.</option>
							<option value="3">baz.</option>
						</select>
						<p>
							<input id="inputAHeb" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"&#1513;&#1500;&#1493;&#1501;!"'/>
						</p>
						<p>
							<input id="inputAEn" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"Hello!"'/>
						</p>
					</div>
				</div>
			</div>

			<div id="embeddedLayoutPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tags & panes with TextBoxesAreas",
				textDir:"auto"'>
				<p>
					Here's a BorderContainer: textDir= contextual
				</p>
				<div data-dojo-textdir="ltr">
					<div id="bContainer" data-dojo-type ="dijit.layout.BorderContainer" data-dojo-props='style:"height:200px; width:300px" '>
						<div id="contentPane3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width:125px", splitter:"true"'>
							Left Pane:
							<textarea id="ltrSimpleTexarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"ltrSimpleTexarea",
								rows:"8", cols:"13"'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
							</textarea>
						</div>
						<div id="contentPane4" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center",textDir:"auto"'>
							Right Pane:
							<textarea id="autoSimpleTexarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"autoSimpleTexarea", rows:"8", cols:"13"
								'> &#1500;&#1493;&#1512;&#1501; &#1488;&#1497;&#1508;&#1505;&#1493;&#1501; &#1491;&#1493;&#1500;&#1493;&#1512; &#1505;&#1497;&#1496; &#1488;&#1502;&#1496;, &#1511;&#1493;&#1504;&#1505;&#1511;&#1496;&#1493;&#1512;&#1512; &#1488;&#1491;&#1497;&#1508;&#1497;&#1505;&#1497;&#1504;&#1490; &#1488;&#1500;&#1497;&#1514; &#1502;&#1493;&#1505;&#1503; &#1502;&#1504;&#1514;.
							</textarea>
						</div>
					</div>
				</div>
				<p>
					And a TabContainer:
				</p>
				<div id="tContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"height:170px; width:450px"' >
					<div id="contentPane5" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 1 textDir=rtl", textDir:"rtl"'>
						<textarea id="rtlSimpleTexarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"rtlSimpleTexarea",
							rows:"4", cols:"15" '>jhkjkh.</textarea>
					</div>
					<div id="contentPane6" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 2 textDir=inherited from ContentPane"' >
						<textarea id="texarea1" data-dojo-type="dijit/form/Textarea" data-dojo-props='name:"texarea1", rows:"4", cols:"14"
							'>&#1502;&#1489;&#1495;&#1503;.</textarea>
						<textarea id="texarea2" data-dojo-type="dijit/form/Textarea" data-dojo-props='name:"texarea2", rows:"4", cols:"14"
							'>Test.</textarea>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
